window.onload = function() {
    //一个图片数组，从后台获取
    var imgData = [{
            name: "图1",
            src: "../../public/img/a.jpg"
        },
        {
            name: "图1",
            src: "../../public/img/a2.jpg"
        },
        {
            name: "图1",
            src: "../../public/img/a3.jpg"
        },
        {
            name: "图1",
            src: "../../public/img/b.jpg"
        },



    ];
    //获取总的宽度，设置列 求出每一列的宽度，将其赋值给每一列
    var box = document.getElementsByClassName("box")[0];
    const columns = 4;
    const columnWidth = Math.floor(box.offsetWidth / columns);

    //获取图片总个数，求出平均每列放多少个，进而在大盒子里边创建放多少个小盒子
    for (var i = 0; i < columns; i++) {
        //双层循环，外层创建item 内层创建img
        box.innerHTML += `<div class="item"></div>`;
        //获取item ，将其高度设置为columnWidth；
        var items = document.getElementsByClassName("item")[i];

        items.setAttribute("width", columnWidth);
        //遍历所有的item，在里边动态添加img

        var imgs = Math.ceil(imgData.length / columns);
        for (var j = 0; j < imgs + 1; j++) {
            items.innerHTML = `<img src="${imgData[i].src}"></div>`
        } //图片动态添加已完成
        //根据图片索引 通过top和left来对元素定位
        var nums = 0;
        imgData.map((item, index, imgData) => {
            //除了最后一列外其他列都排满了



            if (index < columns - 1) {
                return imgData.slice(index * nums, (index + 1) * nums);
                img[j].setAttribute("left", columnWidth * index)
                img[j].setAttribute("top", height * (index * nums))


            } else
            if (index === columns) { //最后一列放应该放的和剩下的
                return imgData.slice(index * nums)
            } else { //切割出来的多余的被赋值为false，为了后续过滤
                return false;
            }
        })

    }









}